<template>
	<view class="mb-2 animate " :class="{ 'mr-1' : direction == 'left','ml-1':direction== 'right','fadeIn':init}" @click="viewDetail">
		<image class="width-full box-img box-shadow main-banner-color-linear3" :src="entity.masterImages | fliterImgs" mode="widthFix"></image>
		<!-- <image :src="entity.masterImages | fliterImgs" mode="widthFix"></image> -->
		<view>
			<text class="gui-text">{{entity.title}}</text>
			<!-- <text class="gui-text">高端家居小桌子高端家居小桌子高端家居小桌子高端家居小桌子高端家居小桌子高端家居小桌子</text> -->
		</view>
		<view v-if="entity.price"><text class="gui-text">￥{{entity.price}}</text></Text></view>
	</view>
</template>

<script>
	export default {
		name: '',
		props: {
			//数据obj
			entity: {
				type: Object,
				default () {
					return {};
				}
			},
			direction:{
				type:String,
				default () {
					return 'left';
				}
			}
			
		},
		data(){
			return {
				init:false
			}
		},
		methods: {
			viewDetail(){
				console.log('this.entity',this.entity)
				this.pageFn.navigateToFn(`/pages/products/productInfo/index?id=${this.entity.id}`)
			}
		},
		watch:{
			entity:{
			  handler(newName, oldName) {
				  this.init = true
				},
				immediate: true,
				deep: true
			}
		},
		filters: {
			fliterImgs(str) {
				return str.split(',')[0];
			}
		},
	};
</script>

<style lang="scss" scoped>
	
	/* 引入动画库 */
	@import "@/GraceUI5/css/animate.css";
	/* 定义动画修饰样式 */
	.animate{animation-duration: 0.6s; animation-timing-function:linear;}
	// 单个商品  产品页
	.box-img{
		border-radius: 20rpx;
	}
	.gui-text{
		line-height: 40rpx;
	}
	

	
</style>
